﻿<!DOCTYPE html>
<html>
    <head>
        <title>CSS3圆角边框的应用</title>
        <style>
            div {
                text-align: center;
                border: 2px solid red;
                margin: 20px;
                padding: 20px
            }
            div.a {border-radius: 20px}
            div.tl {border-top-left-radius: 20px}
            div.tr {border-top-right-radius: 20px}
            div.bl {border-bottom-left-radius: 20px}
            div.br {border-bottom-right-radius: 20px}
        </style>
    </head>
    <body>
        <h3>CSS3圆角边框的应用</h3>
        <div class="a">
            border-radius属性可以制作圆角边框
        </div>
        <div class="tl">
            border-top-left-radius属性可定义边框左上角为圆角
        </div>
        <div class="tr">
            border-top-right-radius属性可定义边框右上角为圆角
        </div>
        <div class="bl">
            border-bottom-left-radius属性可定义边框左下角为圆角
        </div>
        <div class="br">
            border-bottom-right-radius属性可定义边框右下角为圆角
        </div>
    </body>
</html>